<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/29
  Time: 11:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css">
</head>
<body>
<div class="layui-container-fluid">
    <div class="layui-row">
        <div class="layui-col-xs2">
            <div id="companyTree"></div>
        </div>
        <div class="layui-col-xs10">
            <button type="button" class="layui-btn" id="addBtn">
                <i class="layui-icon">&#xe608;</i> 添加
            </button>
            <table id="userTable" lay-filter="userTable"></table>
        </div>
    </div>
</div>
<form id="addForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">登陆名</label>
        <div class="layui-input-block">
            <input type="text" name="username" lay-verify="email" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">密码</label>
        <div class="layui-input-block">
            <input type="text" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addUser">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<form id="grantRoleForm" class="layui-form" style="display:none;padding:10px 20px 0px 0px"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">角色</label>
        <div class="layui-input-block" id="roles">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="grantRoleBtn">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <input type="hidden" name="userId" value=""/>
</form>

<script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="grantRole">设置角色</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript">
    layui.use(["table","form","layer"],function(){
        var table=layui.table;
        var form=layui.form;
        var layer=layui.layer;
        table.render({
            elem: '#userTable'
            ,url: '${pageContext.request.contextPath}/layui-user/selectAll' //数据接口
            ,cols: [[ //表头
                {field: 'id', title: 'ID',}
                ,{field: 'username', title: '用户名'}
                ,{fixed: 'right',title:"操作", align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });

        //给添加按钮增加弹出层---开始
        $("#addBtn").click(function(){
            layer.open({
                type:1,
                title:"添加用户",
                content:$("#addForm")
            });
        });
        //给添加按钮增加弹出层---结束
        //给添加员工表单增加监听事件---开始
        form.on("submit(addUser)", function(data){
            //发出ajax请求，往数据库里面存储数据---开始
            $.ajax({
                url:"${pageContext.request.contextPath}/layui-user/add",
                data:data.field,
                dataType:"json",
                type:"post",
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("添加成功！");
                        //刷新table表格
                        table.reload("userTable");
                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //给添加员工表单增加监听事件---结束

        //监听工具条
        table.on('tool(userTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'grantRole'){
                $("[name=userId]").val(data.id);
                layer.open({
                    type:1,
                    title:"用户赋角色",
                    content:$("#grantRoleForm")
                });
            } else if(layEvent === 'del'){ //删除
                alert("删除"+data.id);
            }
        });

        $.ajax({
            url:"${pageContext.request.contextPath}/layui-role/select",
            dataType:"json",
            type:"post",
            success:function(res){
                var html="";
                for(var i=0;i<res.length;i++){
                    html+="<input type=\"checkbox\" name=\"roleIds\" value='"+res[i].id+"' title=\""+res[i].name+"\">";
                }
                $("#roles").html(html);
                form.render('checkbox');
            }
        });
        //给用户赋角色增加监听事件---开始
        form.on("submit(grantRoleBtn)", function(data){
            var roleIdsObj = $('input[name="roleIds"]');
            var check_val = [];
            for(k in roleIdsObj){
                if(roleIdsObj[k].checked){
                    check_val.push(roleIdsObj[k].value);
                }
            }
            data.field.roleIds = check_val;
            console.log(data.field)
            //发出ajax请求，往数据库里面存储数据---开始
            $.ajax({
                url:"${pageContext.request.contextPath}/layui-user/grantRole",
                data:data.field,
                dataType:"json",
                type:"post",
                traditional:true,
                success:function(res){
                    if(res.code==0){
                        //关闭弹出层
                        layer.closeAll();
                        layer.msg("赋角色成功！");
                        //刷新table表格
                        table.reload("userTable");
                    }
                }
            });
            //发出ajax请求，往数据库里面存储数据---结束
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
        //给用户赋角色表单增加监听事件---结束
    })
</script>
</body>
</html>
